<script setup lang="ts">
import { nextTick, ref } from 'vue';

import { Search } from '@element-plus/icons-vue';

const showSearch = ref(false);
const searchValue = ref('');

const toggleSearch = () => {
  showSearch.value = !showSearch.value;
  if (showSearch.value) {
    // 使用 nextTick 确保 input 元素已渲染
    nextTick(() => {
      document.querySelector('.search-input')?.focus();
    });
  } else {
    searchValue.value = '';
  }
};

const handleSearch = () => {
  if (searchValue.value.trim()) {
    console.log('搜索:', searchValue.value);
    // 这里可以添加搜索逻辑
  }
};
</script>

<template>
  <div class="toolbar">
    <div class="toolbar-container">
      <a class="text-white transition-colors hover:text-[#82318e]" href="#">访客</a>
      <a class="text-white transition-colors hover:text-[#82318e]" href="#">校友</a>
      <a class="text-white transition-colors hover:text-[#82318e]" href="#">捐赠</a>
      <a class="text-white transition-colors hover:text-[#82318e]" href="#">人才招聘</a>
      <a class="text-white transition-colors hover:text-[#82318e]" href="#">内网</a>
      <a class="text-white transition-colors hover:text-[#82318e]" href="#">邮箱</a>
      <a class="text-white transition-colors hover:text-[#82318e]" href="#">图书馆</a>
      <a class="text-white transition-colors hover:text-[#82318e]" href="#">English</a>
      <div class="search-wrapper">
        <transition name="fade">
          <input
            v-if="showSearch"
            v-model="searchValue"
            class="search-input"
            placeholder="请输入关键词"
            type="text"
            @keyup.enter="handleSearch"
          />
        </transition>
        <el-icon class="toolbar-icon text-white" @click="toggleSearch">
          <Search />
        </el-icon>
      </div>
    </div>
  </div>
</template>

<style scoped>
.toolbar {
}

.toolbar-container {
  @apply container mx-auto flex h-[32px] items-center justify-end space-x-5 px-4 text-[12px];
}

.search-wrapper {
  @apply relative flex items-center;
}

.search-input {
  @apply absolute right-6 h-6 w-[200px] rounded-full border border-gray-300 bg-white px-4 text-sm text-gray-700 outline-none transition-all focus:border-[#82318e] focus:ring-1 focus:ring-[#82318e];
}

.toolbar-icon {
  @apply relative cursor-pointer transition-colors hover:text-[#82318e];
}

/* 过渡动画 */
.fade-enter-active,
.fade-leave-active {
  @apply transition-all duration-300;
}

.fade-enter-from,
.fade-leave-to {
  @apply -translate-x-2 opacity-0;
}

.fade-enter-to,
.fade-leave-from {
  @apply translate-x-0 opacity-100;
}
</style>
